
// -------------------下拉选择框数据---------------------------------
$.ajax({
    url: '/my/category/list',
    success: function (res) {
        console.log(res)
        // 动态添加select框之后，发现页面中的下拉框看不见了，需要使用 form.render() 方法更新渲染
        let str = '';
        res.data.forEach(item => {
            str += `<option value="${item.id}">${item.name}</option>`
        });
        $('select[name=cate_id]').append(str);
        //console.log(str);
        // 更新渲染
        let form = layui.form
        // form.render('select', 'lay-filter属性值');
        form.render('select');
    }

});


// ------------------富文本编辑器-------------------------
initEditor()

// ---------------------封面图片处理-----------------------
//1.初始化剪裁框
let img = $('#image');
// 图片选择框
let option = {
    // 宽高比
    aspectRatio: 400 / 280,
    //预览区
    preview: '.img-preview'
}

// 创建剪裁框
img.cropper(option);

//2,点击按钮能够选择图片
$('button:contains("封面")').on('click', () => {
    $('#file').trigger('click');
    console.log($('#file'));
});

//3 当文件的内容改变的时候,修改裁剪图片
$('#file').on('change', function(){
    //判断是否上传了图片
    if (this.files.length > 0) {
        //console.dir(this);
        let fileObj = this.files[0];
        let url = URL.createObjectURL(fileObj);

        // 更换剪裁区的图片(销毁剪裁框 --> 更换图片 --> 重新生成剪裁框)
        img.cropper('destroy').attr('src', url).cropper(option)
    };
});



// ---------------------完成添加-----------------------
// 表单提交 --> 阻止默认行为 --> 收集数据 --> Ajax提交
$('form').on('submit',function(e){
    e.preventDefault();
    //因为有文件上传,所以需要用FormData对象
    let fd = new FormData(this);  //传入DOM对象 ,formData可以根据各项的name属性收集值
    // 测试，看一下fd对象中有哪些值
    //key是表单输入框的name   value是输入框值
    // fd.forEach((value, key) => {
    //   console.log(key, value);
    // })
    // 处理内容，通过富文本编辑器的语法，获取编辑器的内容。并把内容添加到fd对象中
    //fd.set()修改方法
  fd.set('content', tinyMCE.activeEditor.getContent());
  
  // 处理封面图片（剪裁图片，把图片转换成文件对象，最后追加到fd对象）
  let canvas = img.cropper('getCroppedCanvas', { width: 400, height: 280 });
  canvas.toBlob(function (blob) {
    // 形参 blob 是blob对象，追加到fd中，就会变为文件对象
    fd.append('cover_img', blob);

    fd.forEach((value, key) => {
        console.log(key, value);
      });

      $.ajax({
        type: 'POST',
        url: '/my/article/add',
        data: fd,
        processData: false,
        contentType: false,
        success: function (res) {
          layer.msg(res.message);
          location.href = './list.html';
        }
      })  
  });

 

    
})
